<template>
<div class="container">
    <div class="header">
        <NavBar title="我的钱包" left-arrow color="#333333" @click-left="back" @click-right="backHome">
            <template #right>
                <Icon name="wap-home-o" size="20" />
            </template>
        </NavBar>
    </div>
    <div class="main">
        <div class="line"></div>
        <img class="pic" :src="moneyPic" alt="">
        <div class="txt1">快递钱包</div>
        <div class="price">
            <span class="spa">￥</span>
            <span class="spb">{{ userMoney }}</span>
        </div>
        <div class="mx" @click='toRouterName("mywalletmx")'>钱包明细 ></div>
         <div class="mx" style="color:#333" @click='toWalletInfo'>钱包说明 ></div>
        <div class="btna fn-ctr" @click='toRouterName("mywalletcog")'>充值</div>
        <div class="btnb fn-ctr" @click='toAtricle'>服务协议</div>
    </div>
</div>
</template>

<script>
import {
    NavBar,
    Icon
} from "vant";
import {
    getUserInfo
} from '@/model/api';
import moneyPic from '@/assets/money.png';
export default {
    components: {
        NavBar,
        Icon
    },
    data() {
        return {
            moneyPic,
            userMoney: "",
        };
    },
    methods: {
        toAtricle() {
            this.$router.push({
                name: "atricle",
                query: {
                    mode: 3
                }
            })
        },
        toWalletInfo(){
            this.$router.push({
                name:"atricle",
                query:{
                    mode:5,
                }
            })
        },
        toRouterName(name) {
            this.$router.push({
                name: name
            })
        }
    },
    async created() {
        let {
            code,
            data
        } = await getUserInfo();
        code == 1 ? this.userMoney = data.money : "";
    }
};
</script>

<style lang="less" scoped>
.container {
    height: 100vh;
}

.main {
    height: 100%;
    background-color: #fff;
}

.pic {
    width: 72px;
    height: 72px;
    margin: 54px auto 0;
}

.line {
    width: 375px;
    height: 5px;
    background: #F7F7F7;
}

.txt1 {
    width: 100%;
    text-align: center;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;
    margin-bottom: 15px;
}

.price {
    width: 100%;
    text-align: center;

    .spa {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
    }

    .spb {
        font-size: 26px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
    }
}

.mx {
    width: 100%;
    text-align: center;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #FFA901;
    margin-top: 15px;
}

.btna {
    width: 150px;
    height: 31px;
    background: #5652FF;
    border-radius: 3px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    margin: 0 auto;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 56px;
}

.btnb {
    width: 150px;
    height: 31px;
    background: #fff;
    border-radius: 3px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #6F6EB7;
    margin: 0 auto;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 10px;
}
</style>
